<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性</title>
<!-- 垂直方向对象属性  vertical-align
使用方法：
1.用于表格中单元格垂直居中
2.用于行内元素以及行内块元素的垂直居中
【文本和图片垂直居中（对齐）效果】
对齐分为四种：基线对齐、顶部对齐
			居中对齐、底部对齐
元素种类：块元素，行元素，行内块元素
块元素特点：独占一行、
行元素特点：一行内显示、不可设置宽高
网页：元素之间嵌套生成
行元素与块元素可以任意嵌套【前提：设置宽高---行套块、---块套块  √、---块套行  √
				         前提：一行内显示---行套块  √、---块套块  ×、---块套行  √、行套行  √】
								  
	-->
	<style>
	im g:nth-child(1){
	/* vertical-align:baseline 默认基线对齐 */
	vertical-align: baseline;
	}
	/*问题：派生选择器，特点：找后代  p img*/
	i mg:nth-child(2){
	/* vertical-align:baseline 顶部对齐 */
	vertical-align: top;
    width: 500px;
    height: 500px;
    background: yellow;
		}
		img.top{
			vertical-align: top;
		}
		img.middle{
			vertical-align: middle;
		}
		img.bottom{
			vertical-align: bottom;
		}
	</style>
	</head>
	<body>
		<!-- 需求结构：4个p，嵌套 图片叫什么名字
		                    文字后面加img，设置宽高：25~100px
							每个图片后面依次加：基线对齐、顶部对齐
							居中对齐、底部对齐
		-->
		<h1>文本与图片的垂直属性</h1>
		<p>懒羊羊1<img class="baseline" src="img/1.png" alt="懒羊羊1" width="100px" height="100px">基线对齐</p>
		<p>蜡笔小新<img class="top" src="img/2.png" alt="蜡笔小新" width="100px" height="100px">顶部对齐</p>
		<p>懒羊羊2<img class="middle" src="img/3.png" alt="懒羊羊2" width="100px" height="100px">居中对齐</p>
		<p>正南<img class="bottom" src="img/4.png" alt="正男" width="100px" height="100px">底部对齐</p>
		<!-- css选择器--抓第一张图片
		 思路：派生选择器：找后代+伪类选择器：添加效果【错误】
		 错误原因：html结构不符合派生特点：p包含四个img
		          伪类选择器
		 p img：nth-child(1)
		 -->
	</body>
</html>